<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">USER LOGIN</view>
			<view class="welcome">
				用户注册/登录
			</view>
			<view class="input-content">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-text-center">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
						style="width: 320rpx; height: 320rpx;background-color: #fff;">
						<image class="portrait" :src="avatarUrl || '/static/missing-face.png'"
							style="width: 280rpx; height: 280rpx;"></image>
					</button>
					<view style="color: darkgray;padding-bottom: 1em;">选择头像</view>
				</view>
	
				<view class="input-item">
					<text class="tit">昵称：{{ nickName }}</text>
					<input type="nickname" class="tn-text-xl" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
						@input="bindinput" />
				</view>
			</view>
			<button class="confirm-btn" @click="loginAndUpdateUserInfo" :disabled="logining">一键登录</button>
			<view class="forget-section" @click="$API.goBack()">
				跳过
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				wxCode: '',
				localUserInfo: null,
			}
		},
		show() {
			this.login();
		},
		onLoad() {
			this.login();
		},
		methods: {
			onChooseAvatar(e) {
				console.log('微信头像信息', e)
				// 将数据赋值
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
			},
			bindblur(e) {
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},
			//登录
			login() {
				console.log('开始执行登录--->')
				let _self = this;
				// #ifdef MP-WEIXIN
				// 1. wx 获取登录用户 code
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						_self.wxCode = loginRes.code;
						_self.executeLogin(loginRes.code);
					},
					fail: () => {
						return false;
					}
				});
				// #endif
				return false;
			},
			executeLogin(code) {
				let _this = this;
				// 每次登录，都删除前一次的token
				this.$Net.removeToken();
				this.$Net.req({
					url: this.$API.execUserLogin(),
					method: "get",
					data: {
						'code': code,
					},
					dataType: 'json',
					success: function(result, status) {
						// 缓存token
						console.log('根据code执行登录 ->', result);
						_this.$Net.saveToken(result.token);
						_this.localUserInfo = result.user;
						_this.avatarUrl = _this.localUserInfo.avatar;
						_this.nickName = _this.localUserInfo.nickName;
						console.log('根据code登录成功: ', _this.localUserInfo)
					},
				});
			},
			loginAndUpdateUserInfo() {
				// #ifdef MP-WEIXIN
				if (!this.wxCode) {
					this.login();
				}
				
				if (!this.avatarUrl) {
					this.$api.msg('请选择头像');
					return false;
				}

				let nickName = this.nickName ? this.nickName.trim() : null;
				if (!nickName) {
					this.$api.msg("请输入昵称, 小于16字")
					return false;
				}
				
				if (this.avatarUrl.startsWith("wxfile:") || this.avatarUrl.startsWith("http://tmp")) {
					// 图片base64加密上传
					this.$API.imgUrlToBase64(this.avatarUrl).then(img => {
						this.updateUserInfo(img, nickName);
					})
				} else {
					this.updateUserInfo(this.avatarUrl, nickName);
				}
				// #endif
				// #ifdef H5
				let _this = this;
				this.$Net.req({
					url: this.$API.execH5login(),
					method: "get",
					data: {
						'uname': 'admin',
						'pwd': '123456'
					},
					dataType: 'json',
					success: function(result, status) {
						// 查询用户地址列表
						_this.$Net.saveToken(result.token)
						let userInfo = result.user;
						userInfo['logined'] = true;
						// 缓存用户信息
						_this.$API.putUserInfoIntoCache(userInfo);
						// 登录
						_this.$API.goBack();
						console.log('用户登录: {}', result);
					},
				})
				// #endif
			},
			updateUserInfo(avatar, nickName) {
				// 用户信息更新
				let _this = this;
				this.$Net.req({
					url: this.$API.execUpdateUserInfo(),
					method: "post",
					data: {
						'avatar': avatar,
						'nick': nickName
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					success: function(result, status) {
						// 缓存token
						console.log('用户登录信息: ', result);
						if (status.code == 0) {
							result.logined = true;
							_this.localUserInfo = result;
							// 缓存用户信息
							_this.$API.putUserInfoIntoCache(result);
							// 登录
							_this.$API.goBack();
						}
					},
				});
			},
			
			skipLogin() {
				// 不登陆
				// this.$Net.removeToken();
				this.$API.goBack()
			},

		}
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}
	
	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 95vh;
		overflow: hidden;
		background: #fff;
	
		.portrait-box {
			width: 200upx;
			height: 200upx;
			border: 6upx solid #fff;
			border-radius: 50%;
			position: relative;
			z-index: 2;
		}
	
		.portrait {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	
	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}
	
	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
	
		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}
	
		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
	
		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
	
	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	
	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}
	
	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;
	
		&:last-child {
			margin-bottom: 0;
		}
	
		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
	
		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}
	
	.input-content {
		padding: 0 60upx;
	}
	
	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
	
		&:after {
			border-radius: 100px;
		}
	}
	
	.forget-section {
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

</style>